<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>协会概况--->详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ctxPath}/static/manage/css/x-admin.css" media="all">
    <link rel="stylesheet" href="${ctxPath}/static/manage/layui/css/layui.css" media="all">
    <script src="${ctxPath}/static/manage/js/jquery.js"></script>
    <script src="${ctxPath}/static/manage/layui/layui.js"></script>
    <script src="${ctxPath}/static/manage/js/x-layui.js" charset="utf-8"></script>
</head>
<body>
<form class="layui-form" id="formAdd">
    <br>
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label">花卉名称:</label>
        <div class="layui-input-inline">
            <input type="text" id="name" name="name" class="layui-input" lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">花卉颜色:</label>
        <div class="layui-input-inline">
            <input type="text" id="color" name="color" class="layui-input" lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">花卉属性:</label>
        <div class="layui-input-inline">
            <input type="text" id="fproperty" name="fproperty" class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">花卉详情:</label>
        <div class="layui-input-inline">
            <input type="text" id="detail" name="detail" class="layui-input" lay-verify="required"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label  class="layui-form-label">花卉图片:</label>

        <div class="layui-col-md3 layui-col-xs5">
            <div class="layui-upload-list thumbBox mag0 magt3">
                <img class="layui-upload-img thumbImg">
            </div>
        </div>
        <input type="hidden" id="image" name="image"/>
    </div>

    <!--<div class="layui-form-item">
        <label class="layui-form-label"></label>
        <button type="button" class="layui-btn" id="test1">
        <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>-->

    <div class="layui-form-item">
        <label class="layui-form-label">花卉分类:</label>
        <div class="layui-input-inline">
            <select id="fname" name="fid">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="addFlowers">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary" lay-filter="closeBtn">重置</button>
    </div>
</form>
</body>
</html>

<script>
    layui.use(['form','layer','upload'], function(){
        var $ = layui.$, form = layui.form, upload = layui.upload, layer = layui.layer;
        //执行实例
        var uploadInst = upload.render({
            elem: '.thumbBox', //绑定元素,
            size: 260,
            url: "/manage/flowers/uploadImg", //上传接口
            //data: {image:$("#image").val()},
            before: function(obj){
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    layer.load();
                    obj.preview(function(index, file, result){
                        $('.thumbImg').attr('src', result);
                    });
            },
            done: function(res){
                alert("图片上传成功，保存后生效");
                layer.closeAll('loading');
                $("#image").val(res.data);
                $('.thumbBox').css("background","#fff");
                if(res.code != 0){
                    alert(res.data);
                }
            }
        });
    });
</script>

<script type="text/javascript">
    layui.use(['form','layer','upload'], function() {
        var $ = layui.$, form = layui.form, upload = layui.upload, layer = layui.layer;
        // 监听提交
        form.on('submit(addFlowers)', function(obj) {
            $.post(
                "/manage/flowers/flowersAdd",
                obj.field,
                function(res) {
                    console.log(res);
                    window.parent.location.reload();
            },"text"
            )

            return false;
        });
        form.on("submit(closeBtn)",function (data) {
            window.top.location.reload();
        })

        //添加分类时候的下拉框
        $(function (){
            $.ajax({
                url: '/manage/flowerType/selectFType',
                type: 'post',
                data: {},
                dataType: 'json',
                success: function (res) {
                    if (res.length > 0) {
                        for (var i = 0; i < res.length; i++) {
                            $("#fname").append("<option value='" + res[i].fid + "'>" + res[i].fname + "</option>");
                            form.render('select');
                        }
                    }
                }
            })
        })
    })
</script>